<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=0.5">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>寄云科技</title>
    <meta name="description" content="寄云科技"/>
    <meta name="keyWords" content="寄云科技"/>
    <script type="text/javascript" src="catalog/view/javascript/jquery/jquery-1.7.1.min.js"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script type="text/javascript" src="catalog/view/javascript/jquery/jquery.lightbox_me.js"></script>
    <style type="text/css">
        body{
            background: #0e6ad1;
            text-align: center;
            width: 100%;
            margin: 0 auto;
        }
        #lottery{
            margin: 0 auto;
            width: 550px;
            text-align: center;
        }
        #lottery table{
            display: block;
            border: 1px solid #000000;
        }
        #lottery table tr{
            height: 77px;
        }
        #lottery table td{
            border: 1px solid #000000;
            border-collapse:collapse;
        }
        #lottery table td img{
            display: block;
        }
        #lottery table td a{
            display: block;
            width:300px;
            height:177px;
            line-height:150px;
            text-decoration:none;
        }
        #lottery_times{
            color: #ffffff;
            display: block;
            font-size: 1.2em;
            font-weight: bold;
            margin: 0 0 0 127px;
            text-align: center;
            width: 30px;
        }
        #lottery table td.btn{
            background:url('catalog/view/theme/default/template/wx/style/images/lottery/bg.jpg') no-repeat -1px -1px;

        }
        #lottery table td.active img{
            opacity:0.3;
        }

        .btn {
            background-color: #38b0e3;
            background-image: none;
            border: 0 none;
            border-radius: 7px;
            box-shadow: none !important;
            color: #ffffff;
            cursor: pointer;
            filter: none;
            font-family: Microsoft YaHei,Helvetica,Arial,sans-serif;
            font-size: 14px;
            outline: medium none;
            padding: 7px 14px;
            text-shadow: none;
        }
        #prize_block{
            display: none;
            background: none repeat scroll 0 0 #ffffff;
            border-radius: 10px;
            height: 178px;
            padding: 30px;
            width: 511px;
            text-align: left;
        }
    </style>
</head>
</head>

<body>
<div id="lottery">
    <table border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td class="lottery-unit lottery-unit-0"><img src="catalog/view/theme/default/template/wx/style/images/lottery/1.jpg"></td>
            <td class="lottery-unit lottery-unit-1"><img src="catalog/view/theme/default/template/wx/style/images/lottery/2.jpg"></td>
            <td class="lottery-unit lottery-unit-2"><img src="catalog/view/theme/default/template/wx/style/images/lottery/3.jpg"></td>
            <td class="lottery-unit lottery-unit-3"><img src="catalog/view/theme/default/template/wx/style/images/lottery/4.jpg"></td>
            <td class="lottery-unit lottery-unit-4"><img src="catalog/view/theme/default/template/wx/style/images/lottery/5.jpg"></td>
        </tr>
        <tr>
            <td class="lottery-unit lottery-unit-15"><img src="catalog/view/theme/default/template/wx/style/images/lottery/6.jpg"></td>
            <td colspan="3" rowspan="3" class="btn"><a href="#"></a>
                <span id="lottery_times"><?php echo $lottery_times;?></span>
            </td>
            <td class="lottery-unit lottery-unit-5"><img src="catalog/view/theme/default/template/wx/style/images/lottery/7.jpg"></td>
        </tr>
        <tr>
            <td class="lottery-unit lottery-unit-14"><img src="catalog/view/theme/default/template/wx/style/images/lottery/8.jpg"></td>
            <td class="lottery-unit lottery-unit-6"><img src="catalog/view/theme/default/template/wx/style/images/lottery/9.jpg"></td>
        </tr>
        <tr>
            <td class="lottery-unit lottery-unit-13"><img src="catalog/view/theme/default/template/wx/style/images/lottery/10.jpg"></td>
            <td class="lottery-unit lottery-unit-7"><img src="catalog/view/theme/default/template/wx/style/images/lottery/11.jpg"></td>
        </tr>
        <tr>
            <td class="lottery-unit lottery-unit-12"><img src="catalog/view/theme/default/template/wx/style/images/lottery/12.jpg"></td>
            <td class="lottery-unit lottery-unit-11"><img src="catalog/view/theme/default/template/wx/style/images/lottery/13.jpg"></td>
            <td class="lottery-unit lottery-unit-10"><img src="catalog/view/theme/default/template/wx/style/images/lottery/4.jpg"></td>
            <td class="lottery-unit lottery-unit-9"><img src="catalog/view/theme/default/template/wx/style/images/lottery/5.jpg"></td>
            <td class="lottery-unit lottery-unit-8"><img src="catalog/view/theme/default/template/wx/style/images/lottery/6.jpg"></td>
        </tr>
    </table>
</div>

<div id="prize_block" style="">
        恭喜你抽中了<span id="prize_name"></span>,请准确填写您的手机号，我们的客服将会联系您。<br/><br/>
        手机号码：<input type="text" name="telephone"><br><br>
        姓　　名：<input type="text" name="name"><br><br>
        <button value="1" type="button" class="btn" id="submit">确认</button>
</div>
</div>
<script type="text/javascript">

    $(window).resize(function(){
        $('#lottery').css({
            position:'absolute',
            left: ($(window).width() - $('#lottery').outerWidth())/2,
            top: ($(window).height() - $('#lottery').outerHeight())/2 + $(document).scrollTop()
        });
    });
    //初始化函数
    $(window).resize();

    $('#submit').live('click', function() {
        $.ajax({
            url: 'index.php?route=wx/lottery/winner',
            type: 'post',
            data: $('#prize_block input'),
            dataType: 'json',
            success: function (json) {
                alert(json['msg']);
            }

        });
    });


    var json_arr='';
    var lottery={
        index:-1,	//当前转动到哪个位置，起点位置
        count:0,	//总共有多少个位置
        timer:0,	//setTimeout的ID，用clearTimeout清除
        speed:20,	//初始转动速度
        times:0,	//转动次数
        cycle:16,	//转动基本次数：即至少需要转动多少次再进入抽奖环节
        prize:-1,	//中奖位置
        init:function(id){
            if ($("#"+id).find(".lottery-unit").length>0) {
                $lottery = $("#"+id);
                $units = $lottery.find(".lottery-unit");
                this.obj = $lottery;
                this.count = $units.length;
                $lottery.find(".lottery-unit-"+this.index).addClass("active");
            };
        },
        roll:function(){
            var index = this.index;
            var count = this.count;
            var lottery = this.obj;
            $(lottery).find(".lottery-unit-"+index).removeClass("active");
            index += 1;
            if (index>count-1) {
                index = 0;
            };
            $(lottery).find(".lottery-unit-"+index).addClass("active");
            this.index=index;
            return false;
        },
        stop:function(index){
            this.prize=index;
            return false;
        }
    };

    function roll(){
        lottery.times += 1;
        lottery.roll();

//        console.log(lottery.times+'^^^^^^'+lottery.cycle+'^^^^^^^'+lottery.prize+'^^^^^^^'+lottery.index);

        if (lottery.times > lottery.cycle+10 && lottery.prize==lottery.index) {

            clearTimeout(lottery.timer);
            lottery.prize=-1;
            lottery.times=0;
            click=false;
            if(json_arr['prize']!=8&&json_arr['prize']!=15){
                $('#prize_name').html(json_arr['prize_name']);
                var lightbox=$('#prize_block').lightbox_me({
                    centered: true
                });
            }else{
                alert('很遗憾，没有中奖，再试一次吧！')
            }
        }else{
            if (lottery.times<lottery.cycle) {
                lottery.speed -= 10;
            }else if(lottery.times==lottery.cycle) {

                    lottery.prize = lottery.index;
            }else{
                if (lottery.times > lottery.cycle+10 && ((lottery.prize==0 && lottery.index==7) || lottery.prize==lottery.index+1)) {
                    lottery.speed += 110;
                }else{
                    lottery.speed += 20;
                }
            }
            if (lottery.speed<40) {
                lottery.speed=40;
            };
//            console.log(lottery.times+'^^^^^^'+lottery.speed+'^^^^^^^'+lottery.prize);
            lottery.timer = setTimeout(roll,lottery.speed);
        }
        return false;
    }

    var click=false;

    window.onload=function(){
        lottery.init('lottery');
        $("#lottery a").click(function(){
            if (click) {
                return false;
            }else{
                htmlobj=$.ajax({
                    url:"index.php?route=wx/lottery/get_prize",
                    async:false,
                    success: function(json){
                        var json = JSON.parse(json);
                        if(json['error']){
                            alert(json['error']);
                            return false;
                        }else{
                            var times_s=parseInt($('#lottery_times').html())-1;
                            $('#lottery_times').html(times_s);
                            lottery.index=parseInt(json['prize']);
                            lottery.speed=100;
                            roll();
                            click=true;

                            json_arr=json;


                            return false;
                        }
                    }
                    });

            }
        });
    };
</script>
<script type="text/javascript">
    wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: '<?php echo $signPackage["appId"];?>',
        timestamp: <?php echo $signPackage["timestamp"];?>,
        nonceStr: '<?php echo $signPackage["nonceStr"];?>',
        signature: '<?php echo $signPackage["signature"];?>',
        jsApiList: [
            'checkJsApi',
            'onMenuShareTimeline',
            'onMenuShareAppMessage',
        ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
    });


    wx.ready(function () {

        var shareData = {
            title: '寄云科技邀您体验,抽奖送Iphone6 plus!',
            desc: '寄云科技邀您体验,抽奖送Iphone6 plus!',
            link: "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxdc4ce97c601d543f&redirect_uri=https%3a%2f%2fapps.neucloud.cn%2fwx.php%3fsceneId%3d2&response_type=code&scope=snsapi_userinfo&state=<?php echo $openid;?>#wechat_redirect",
            imgUrl: 'https://apps.neucloud.cn/image/data/neucloud_logo.jpg'
        };

        //分享朋友
        wx.onMenuShareAppMessage({
            title: shareData.title,
            desc: shareData.desc,
            link: shareData.link,
            imgUrl:shareData.imgUrl,
            trigger: function (res) {
            },
            success: function (res) {

            },
            cancel: function (res) {
            },
            fail: function (res) {
                alert(JSON.stringify(res));
            }
        });
        //朋友圈
        wx.onMenuShareTimeline({
            title: shareData.title+"---"+shareData.desc,
            link: shareData.link,
            imgUrl:shareData.imgUrl,
            trigger: function (res) {
            },
            success: function (res) {
                $.post("<?php echo $share_action;?>",
                    {
                        openid:"<?php echo $openid;?>"
                    });
            },
            cancel: function (res) {
            },
            fail: function (res) {
                alert(JSON.stringify(res));
            }
        });

    });
</script>

</body>
</html>
